<template>
  <view class="trusteeship">
    <mineNavbar :styleData="styleData" />

    <view class="trusteeshipTop">
      <view class="relevance"> 关联门店</view>
      <view class="address"
        >{{ (detailsData && detailsData.storeName) || "-" }}
      </view>
    </view>

    <view class="setting">
      <view class="relevance"> 招聘托管</view>
      <view class="startUsing">
        <view class="title"> 启用招聘托管 </view>
        <view class="statusIcon">
          <image
            @click="setStatus"
            v-if="iconStatus"
            class="iconImage"
            src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/07/8c9ec6abf9ad444ab266f7b5c012635c.png"
            mode="aspectFit|aspectFill|widthFix"
            lazy-load="false"
            binderror=""
            bindload="" />

          <image
            v-if="iconStatus === false"
            @click="setStatus"
            class="iconImage"
            src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/07/03243af956514d9bb2fa3ec00448b90b.png"
            mode="aspectFit|aspectFill|widthFix"
            lazy-load="false"
            binderror=""
            bindload="" />
        </view>
      </view>

      <view class="desc"> 开启后，门店也可以为您发布岗位、录用员工 </view>
    </view>
  </view>
</template>

<script>
import { getTrusteeshipInfoAPI, trusteeshipAPI } from "@/api/subPage/mine";
export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "招聘托管",
      },
      iconStatus: true,

      detailsData: {},
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) {


    this.getList();
  },
  onShow() {},
  onReady() {},
  methods: {
    // 设置托管状态
    async setStatus() {
      this.iconStatus = !this.iconStatus;
      let trusteeshipStatus = this.iconStatus === true ? "1" : "0";
      const res = await trusteeshipAPI({
        trusteeshipStatus,
      });
      console.log(res, "res");

      this.getList();
    },

    // 获取托管状态
    async getList() {
      const { code, data } = await getTrusteeshipInfoAPI();
      if (code === 200) {
        this.detailsData = data;

        data.trusteeshipStatus === "0"
          ? (this.iconStatus = false)
          : (this.iconStatus = true);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.trusteeship {
  height: 100vh;
  width: 100%;
  background-color: #f9f9f9;
  overflow: hidden;

  .trusteeshipTop {
    padding: 24rpx;
    background-color: #fff;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    margin-top: 24rpx;
    .relevance {
      font-size: 24rpx;
      color: #00000073;

      margin-bottom: 52rpx;
    }

    .address {
      font-size: 28rpx;
      color: #000000e0;
    }
  }

  .setting {
    margin-top: 24rpx;
    padding: 24rpx;
    background-color: #fff;

    .relevance {
      font-size: 24rpx;
      color: #00000073;

      margin-bottom: 52rpx;
    }

    .startUsing {
      display: flex;
      justify-content: space-between;

      .iconImage {
        width: 76rpx;
        height: 42rpx;
      }
    }

    .desc {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
    }
  }
}
</style>
